import React, { useEffect } from 'react'
import styles from './index.module.css'

function Map() {
    const TMap = window.TMap;
    //腾讯地图
    const tencentMap = React.useRef();

    //[]空数组相当于componentDidMount
    useEffect(() => {
        initData()
        return () => {
            tencentMap.current.destroy();
        }
    }, []);

    function initData() {
        const center = new TMap.LatLng(24.20114351023042, 113.3996004760742)
        tencentMap.current = new TMap.Map(document.getElementById('container'), {
            center: center,//设置地图中心点坐标
            zoom: 13,   //设置地图缩放级别
            pitch: 43.5,  //设置俯仰角
            rotation: 45,    //设置地图旋转角度
            viewMode: '2D', //3D模式
        });
        //去掉缩放按钮
        tencentMap.current.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
    }

    return (
        <div className={styles.map} id="container" />
    )
}

export default Map;
